// 主界面组件
<template>
  <div>
    <Loading v-show="isLoading"></Loading>
    <BookType @changeType="handelType"></BookType>
    <BooksList :Books="books" v-show="!isLoading"></BooksList>
  </div>
</template>

<script>
import BooksList from "@/components/BooksList";
import BookType from "@/components/BookType";
import Loading from "@/components/Loading";
import { getBooksList } from "@/services/BooksService";
export default {
  components: {
    BookType,
    BooksList,
    Loading,
  },
  data() {
    return {
      books: [],
      typeId: null,
      isLoading: true,
    };
  },
  methods: {
    async handelType(id) {
      //在axios远程访问之前设置为true
      this.isLoading = true;

      console.log("类型id==" + id);
      this.typeId = id;
      let resp = await getBooksList(this.typeId);
      console.log(resp.data);
      this.books = resp.data.list;
      
      //远程访问之后设置为false
      this.isLoading = false;
    },
  },
};
</script>

<style></style>
